<template>
    <view class="doctor-list-container">
        <!-- 搜索栏 -->
        <view class="search-bar">
            <view class="search-box">
                <u-icon name="search" size="32" color="#999"></u-icon>
                <input 
                    class="input" 
                    type="text" 
                    v-model="searchKeyword"
                    placeholder="搜索医生姓名、科室或医院"
                    @confirm="searchDoctors"
                />
            </view>
        </view>
        
        <!-- 筛选栏 -->
        <view class="filter-bar">
            <view class="filter-item" @click="showDepartmentPicker">
                <text class="label">科室</text>
                <text class="value">{{selectedDepartment || '全部'}}</text>
                <u-icon name="arrow-down" size="24" color="#666"></u-icon>
            </view>
            <view class="filter-item" @click="showTitlePicker">
                <text class="label">职称</text>
                <text class="value">{{selectedTitle || '全部'}}</text>
                <u-icon name="arrow-down" size="24" color="#666"></u-icon>
            </view>
            <view class="filter-item" @click="showHospitalPicker">
                <text class="label">医院</text>
                <text class="value">{{selectedHospital || '全部'}}</text>
                <u-icon name="arrow-down" size="24" color="#666"></u-icon>
            </view>
        </view>
        
        <!-- 医生列表 -->
        <scroll-view 
            class="doctor-list" 
            scroll-y 
            @scrolltolower="loadMore"
            refresher-enabled
            :refresher-triggered="refreshing"
            @refresherrefresh="onRefresh"
        >
            <view 
                class="doctor-item" 
                v-for="(doctor, index) in doctors" 
                :key="index"
                @click="viewDoctor(doctor.id)"
            >
                <image class="avatar" :src="doctor.avatar" mode="aspectFill"></image>
                <view class="info">
                    <view class="name-row">
                        <text class="name">{{doctor.name}}</text>
                        <text class="title">{{doctor.title}}</text>
                        <view class="status" :class="doctor.status">
                            {{doctor.status === 'online' ? '在线' : '离线'}}
                        </view>
                    </view>
                    <view class="department">{{doctor.department}}</view>
                    <view class="hospital">{{doctor.hospital}}</view>
                    <view class="tags">
                        <text class="tag" v-for="(tag, tagIndex) in doctor.tags" :key="tagIndex">
                            {{tag}}
                        </text>
                    </view>
                </view>
                <view class="action">
                    <u-button 
                        type="primary" 
                        size="mini" 
                        @click.stop="startConsult(doctor.id)"
                    >咨询</u-button>
                </view>
            </view>
            
            <!-- 空状态 -->
            <view class="empty-state" v-if="doctors.length === 0">
                <u-empty text="暂无医生" mode="list"></u-empty>
            </view>
            
            <!-- 加载更多 -->
            <view class="load-more" v-if="hasMore">
                <u-loadmore :status="loadStatus"></u-loadmore>
            </view>
        </scroll-view>
        
        <!-- 科室选择器 -->
        <u-picker 
            v-model="showDepartmentPickerPopup" 
            :columns="departmentColumns" 
            @confirm="onDepartmentConfirm"
        ></u-picker>
        
        <!-- 职称选择器 -->
        <u-picker 
            v-model="showTitlePickerPopup" 
            :columns="titleColumns" 
            @confirm="onTitleConfirm"
        ></u-picker>
        
        <!-- 医院选择器 -->
        <u-picker 
            v-model="showHospitalPickerPopup" 
            :columns="hospitalColumns" 
            @confirm="onHospitalConfirm"
        ></u-picker>
    </view>
</template>

<script>
import request from '@/util/request'

export default {
    data() {
        return {
            searchKeyword: '',
            doctors: [
                {
                    id: 1,
                    name: '张医生',
                    title: '主任医师',
                    department: '神经内科',
                    hospital: '北京协和医院',
                    avatar: '/static/images/doctor1.jpg',
                    status: 'online',
                    tags: ['擅长脑卒中', '10年经验']
                },
                {
                    id: 2,
                    name: '李医生',
                    title: '副主任医师',
                    department: '康复科',
                    hospital: '上海华山医院',
                    avatar: '/static/images/doctor2.jpg',
                    status: 'offline',
                    tags: ['擅长康复训练', '8年经验']
                }
            ],
            selectedDepartment: '',
            selectedTitle: '',
            selectedHospital: '',
            showDepartmentPickerPopup: false,
            showTitlePickerPopup: false,
            showHospitalPickerPopup: false,
            departmentColumns: [
                ['全部', '神经内科', '康复科', '心内科', '神经外科']
            ],
            titleColumns: [
                ['全部', '主任医师', '副主任医师', '主治医师', '住院医师']
            ],
            hospitalColumns: [
                ['全部', '北京协和医院', '上海华山医院', '广州中山医院', '深圳人民医院']
            ],
            page: 1,
            pageSize: 10,
            hasMore: true,
            loadStatus: 'loadmore',
            refreshing: false
        }
    },
    methods: {
        async loadDoctors() {
            try {
                const res = await request.get('/api/doctor/list', {
                    params: {
                        page: this.page,
                        pageSize: this.pageSize,
                        keyword: this.searchKeyword,
                        department: this.selectedDepartment === '全部' ? '' : this.selectedDepartment,
                        title: this.selectedTitle === '全部' ? '' : this.selectedTitle,
                        hospital: this.selectedHospital === '全部' ? '' : this.selectedHospital
                    }
                })
                
                if (res.code === 200) {
                    if (this.page === 1) {
                        this.doctors = res.data.list
                    } else {
                        this.doctors = [...this.doctors, ...res.data.list]
                    }
                    
                    this.hasMore = res.data.hasMore
                    this.loadStatus = this.hasMore ? 'loadmore' : 'nomore'
                }
            } catch (error) {
                console.log(error)
            }
        },
        
        async loadMore() {
            if (!this.hasMore) return
            
            this.loadStatus = 'loading'
            this.page++
            await this.loadDoctors()
        },
        
        async onRefresh() {
            this.refreshing = true
            this.page = 1
            await this.loadDoctors()
            this.refreshing = false
        },
        
        searchDoctors() {
            this.page = 1
            this.loadDoctors()
        },
        
        showDepartmentPicker() {
            this.showDepartmentPickerPopup = true
        },
        
        showTitlePicker() {
            this.showTitlePickerPopup = true
        },
        
        showHospitalPicker() {
            this.showHospitalPickerPopup = true
        },
        
        onDepartmentConfirm(e) {
            this.selectedDepartment = e.value[0]
            this.page = 1
            this.loadDoctors()
        },
        
        onTitleConfirm(e) {
            this.selectedTitle = e.value[0]
            this.page = 1
            this.loadDoctors()
        },
        
        onHospitalConfirm(e) {
            this.selectedHospital = e.value[0]
            this.page = 1
            this.loadDoctors()
        },
        
        viewDoctor(id) {
            uni.navigateTo({
                url: `/pages/doctor/detail?id=${id}`
            })
        },
        
        startConsult(id) {
            uni.navigateTo({
                url: `/pages/consultation/chat?id=${id}`
            })
        }
    },
    onLoad() {
        this.loadDoctors()
    }
}
</script>

<style lang="less" scoped>
.doctor-list-container {
    min-height: 100vh;
    background-color: #F8F8F8;
    display: flex;
    flex-direction: column;
    
    .search-bar {
        background-color: #fff;
        padding: 20rpx 30rpx;
        
        .search-box {
            display: flex;
            align-items: center;
            background-color: #F8F8F8;
            border-radius: 32rpx;
            padding: 0 20rpx;
            
            .input {
                flex: 1;
                height: 64rpx;
                font-size: 28rpx;
                margin-left: 10rpx;
            }
        }
    }
    
    .filter-bar {
        background-color: #fff;
        display: flex;
        padding: 20rpx 30rpx;
        border-bottom: 2rpx solid #F8F8F8;
        
        .filter-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            
            .label {
                font-size: 28rpx;
                color: #666;
                margin-right: 10rpx;
            }
            
            .value {
                font-size: 28rpx;
                color: #333;
                margin-right: 10rpx;
            }
        }
    }
    
    .doctor-list {
        flex: 1;
        padding: 20rpx;
        
        .doctor-item {
            background-color: #fff;
            border-radius: 16rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            display: flex;
            align-items: center;
            
            .avatar {
                width: 120rpx;
                height: 120rpx;
                border-radius: 60rpx;
                margin-right: 20rpx;
            }
            
            .info {
                flex: 1;
                
                .name-row {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10rpx;
                    
                    .name {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333;
                        margin-right: 20rpx;
                    }
                    
                    .title {
                        font-size: 24rpx;
                        color: #666;
                        margin-right: 20rpx;
                    }
                    
                    .status {
                        font-size: 24rpx;
                        padding: 4rpx 16rpx;
                        border-radius: 20rpx;
                        
                        &.online {
                            background-color: #E1F3D8;
                            color: #67C23A;
                        }
                        
                        &.offline {
                            background-color: #FDF6EC;
                            color: #E6A23C;
                        }
                    }
                }
                
                .department {
                    font-size: 28rpx;
                    color: #333;
                    margin-bottom: 6rpx;
                }
                
                .hospital {
                    font-size: 24rpx;
                    color: #999;
                    margin-bottom: 10rpx;
                }
                
                .tags {
                    display: flex;
                    flex-wrap: wrap;
                    
                    .tag {
                        font-size: 24rpx;
                        color: #666;
                        background-color: #F8F8F8;
                        padding: 4rpx 16rpx;
                        border-radius: 20rpx;
                        margin-right: 10rpx;
                        margin-bottom: 10rpx;
                    }
                }
            }
            
            .action {
                margin-left: 20rpx;
            }
        }
        
        .empty-state {
            padding: 100rpx 0;
        }
        
        .load-more {
            padding: 20rpx 0;
        }
    }
}
</style> 